export default {
  props: {
    size: {
      type: String,
      default: "default",
    },
    filterFormData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.headerShortcutFilterModalInput.$el.select();
        });
      }
    },
  },
  computed: {},
  data() {
    return {
      visible: false,
      $xetable: null,
      filterValue: "",
      columnTitle: "",
      currColumn: null,
      currRow: null,
    };
  },
  render() {
    const { visible, handleOk, handleCancel, size, columnTitle } = this;
    const modalProps = {
      ref: "headerShortcutFilterModalDom",
      props: {
        visible: visible,
        size: size,
        destroyOnClose: true,
        maskClosable: false,
        title: "查询条件",
        width: 450,
        wrapClassName: "header-shortcut-filter-modal",
      },
      attrs: {},
      class: {
        //"not-enter-event": true
      },
      on: {
        cancel: handleCancel,
        ok: handleOk,
      },
    };

    return (
      <div>
        <v-modal {...modalProps}>
          <div class="mb-5">
            输入在“<span class="blue-text">{columnTitle}</span>”字段中查找的关键字符:
          </div>
          <div>
            <v-input size={size} autoFocus={true} focusSelectAll={true} v-model={this.filterValue} ref="headerShortcutFilterModalInput"></v-input>
          </div>
        </v-modal>
      </div>
    );
  },
  mounted() {},
  methods: {
    async open(options) {
      this.columnTitle = options.title;
      this.filterValue = options.value;
      this.currColumn = options.column;
      this.currRow = options.row;
      this.visible = true;
    },
    handleOk() {
      this.$emit("onSubmit", {
        value: this.filterValue,
        column: this.currColumn,
        row: this.currRow,
      });

      this.handleCancel();
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
